src/components/GraphView.tsx (3)

66-94: Consider adding missing dependencies to navigateMatch.

The useCallback dependencies include only [matchedNodes], but the callback also uses setCenter, getZoom, setNodes, and constants NODE_WIDTH, NODE_HEIGHT. While the setters and constants are stable, setCenter and getZoom from useReactFlow should technically be included.

- [matchedNodes]
+ [matchedNodes, setCenter, getZoom, setNodes]

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/GraphView.tsx` around lines 66 - 94, The navigateMatch
useCallback currently lists only matchedNodes in its dependency array but also
reads setCenter, getZoom, setNodes and NODE_WIDTH/NODE_HEIGHT; update the
dependency array for the navigateMatch callback to include setCenter, getZoom,
setNodes, NODE_WIDTH, and NODE_HEIGHT (in addition to matchedNodes) so the hook
correctly reacts to changes in those values when computing newIndex, calling
setCenter(getZoom...), and updating nodes via setNodes.

---

348-354: Same setTimeout inside setState issue.

This has the same concern as lines 307-309. Consider tracking changed externally and calling setCenter after the setNodes call completes.

♻️ Suggested refactor

+ let shouldCenter = false;
+ let centerTarget = { x: 0, y: 0 };
+
  setNodes((nds) => {
    let changed = false;
    const newNodes = nds.map((n) => {
      const selected = n.id === targetNode.id;
      if (n.selected !== selected) changed = true;
      return { ...n, selected };
    });

    if (changed) {
-     const x = targetNode.position.x + NODE_WIDTH / 2;
-     const y = targetNode.position.y + NODE_HEIGHT / 2;
-     setTimeout(() => {
-       setCenter(x, y, { zoom: Math.max(getZoom(), 1), duration: 500 });
-     }, 0);
+     shouldCenter = true;
+     centerTarget = {
+       x: targetNode.position.x + NODE_WIDTH / 2,
+       y: targetNode.position.y + NODE_HEIGHT / 2,
+     };
    }
    return changed ? newNodes : nds;
  });
+
+ if (shouldCenter) {
+   setCenter(centerTarget.x, centerTarget.y, { zoom: Math.max(getZoom(), 1), duration: 500 });
+ }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/GraphView.tsx` around lines 348 - 354, The setCenter call is
being deferred with setTimeout inside the same state update flow (see
setTimeout, setCenter, getZoom, setNodes and the changed flag), which can cause
the same "setState inside setTimeout" issue; instead, detect and store the
changed/targetNode info before calling setNodes (or use the setNodes functional
update to compute the new node and capture its center), then invoke setCenter
after setNodes completes—e.g., track a local variable or state like
pendingCenter (x,y) when you setNodes and call setCenter once that update
finishes (or from a useEffect that watches pendingCenter) so you remove the
setTimeout and reliably center using getZoom and duration.

---

295-313: Side effect inside setNodes callback is an anti-pattern.

Calling setTimeout with fitView inside a setState updater function can cause issues:

1. In React StrictMode, updater functions may be invoked multiple times, scheduling duplicate fitView calls.
2. Mixing state logic with side effects reduces predictability.

Consider extracting the side effect to run after the state update using a separate flag or ref.

♻️ Suggested refactor using a ref to track pending fitView

+ const pendingFitViewRef = useRef(false);

  // In the useEffect:
  setNodes((nds) => {
    let hasSelected = false;
    const newNodes = nds.map((n) => {
      if (n.selected) hasSelected = true;
      return { ...n, selected: false };
    });
    
    if (hasSelected) {
-     setTimeout(() => {
-       fitView({ duration: 800, padding: 0.05 });
-     }, 0);
+     pendingFitViewRef.current = true;
      return newNodes;
    }
    return nds;
  });
+ 
+ // After setNodes, outside the updater:
+ if (pendingFitViewRef.current) {
+   pendingFitViewRef.current = false;
+   fitView({ duration: 800, padding: 0.05 });
+ }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/GraphView.tsx` around lines 295 - 313, The updater passed to
setNodes currently runs a side effect (setTimeout(()=>fitView(...))) which is an
anti-pattern; change this by removing the setTimeout/fitView call from the
setNodes callback (the block that computes newNodes and uses hasSelected) and
instead set a local flag or a ref (e.g., pendingFitRef) when you detect
hasSelected, then use an effect (useEffect) that watches that flag or
nodes/matched state to call fitView once after the state update and clear the
flag; keep calls to setMatchedNodes, setCurrentMatchIndex, and setErrorMessage
as-is but ensure fitView is only invoked from the effect, not inside setNodes or
any state updater.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes